import "./App.css";

import Home from "./pages/home";
import One from "./pages/one";

// 1.导入路由相关组件
import { BrowserRouter as Router, Link, Routes, Route } from "react-router-dom";

// 导入路由配置对象
import router from "./router";

function App() {
  return (
    // 2.使用Router组件包裹页面内容，页面中才能使用路由
    <Router>
      <div className="App">
        {/* 导航栏 */}
        <div className="nav">
          {/* 3.使用Link组件，相当于a标签 */}
          {/* <Link to="/home">首页</Link>
          <Link to="/about">关于</Link> */}

          {/* 声明式路由 */}
          {router.routes.map((item, index) => {
            if (item.path !== "/" && item.path !== "*") {
              return (
                <Link key={index} to={item.path}>
                  {item.title}
                </Link>
              );
            }else{
              return null
            }
          })}
        </div>
        {/* 内容部分 */}
        <div className="content">
          {/* 4.Route组件就是路由展示出口 */}
          <Routes>
            {/* <Route path="/home" element={<Home></Home>}></Route>
            <Route path="/about" element={<About></About>}></Route> */}

            {
              // 一级路由出口
              router.routes.map((item, index) => {
                return (
                  <Route key={index} path={item.path} element={item.element}>
                    {/* 判断children是否有值，如果有就遍历children，渲染二级路由出口 */}
                    {item.children
                      ? item.children.map((item2, index2) => {
                          return (
                            <Route
                              key={index2}
                              path={item2.path}
                              element={item2.element}
                            ></Route>
                          );
                        })
                      : null}
                  </Route>
                );
              })
            }
          </Routes>
        </div>
      </div>
    </Router>
  );
}

export default App;
